<template>
  <div class="user-profile">

    <el-card class="profile-container">
      <div class="info-section">
        <div class="info-item">
          <label>用户名:</label>
          <span>{{ userStore.userInfo.username }}</span>
        </div>
        <div class="info-item">
          <label>真实姓名:</label>
          <el-input
              v-model="updateProfileFormData.realName"
              placeholder="输入真实姓名"
              class="input-item"
          />
        </div>
        <div class="info-item">
          <label>性别:</label>
          <el-radio-group v-model="updateProfileFormData.sex">
            <el-radio label="M">男</el-radio>
            <el-radio label="F">女</el-radio>
          </el-radio-group>
        </div>
        <div class="info-item">
          <label>手机号:</label>
          <el-input
              v-model="updateProfileFormData.phone"
              placeholder="请输入手机号"
              class="input-item"
          />
        </div>
        <div class="info-item">
          <label>邮箱:</label>
          <el-input
              v-model="updateProfileFormData.email"
              placeholder="请输入邮箱"
              class="input-item"
          />
        </div>
      </div>
      <el-button type="primary" class="submit-button" @click="handleSubmit">提交</el-button>
      <div v-if="message" class="message">{{ message }}</div>
    </el-card>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { updateUserApi, queryByIdApi } from '@/api/userApi';
import { useUserStore } from '@/store/useUserStore';
import DOMPurify from 'dompurify';  // 引入 DOMPurify

const userStore = useUserStore();
const message = ref('');

// 本地状态管理
const updateProfileFormData = reactive({
  id: '',
  realName: '',
  sex: 'M',
  phone: '',
  email: ''
});

// 获取用户信息
const getUserInfo = async () => {
  const userId = userStore.userInfo.id;
  if (userId) {
    try {
      const result = await queryByIdApi(userId);
      if (result.data) {
        updateProfileFormData.id = result.data.id;
        updateProfileFormData.realName = result.data.realName;
        updateProfileFormData.sex = result.data.sex;
        updateProfileFormData.phone = result.data.phone;
        updateProfileFormData.email = result.data.email;
      } else {
        ElMessage.error("未找到用户信息");
      }
    } catch (error) {
      ElMessage.error("获取用户信息失败: " + error.message);
    }
  }
};

// 在组件挂载时获取用户信息
onMounted(() => {
  getUserInfo();
});

// 提交用户资料
const handleSubmit = async () => {
  try {
    // 使用 DOMPurify 清理用户输入
    const sanitizedData = {
      id: updateProfileFormData.id,
      realName: DOMPurify.sanitize(updateProfileFormData.realName),
      sex: updateProfileFormData.sex,
      phone: DOMPurify.sanitize(updateProfileFormData.phone),
      email: DOMPurify.sanitize(updateProfileFormData.email)
    };

    const response = await updateUserApi(sanitizedData);
    if (response) {
      message.value = '用户信息更新成功！';
      userStore.userInfo = { ...userStore.userInfo, ...sanitizedData };
    } else {
      message.value = '更新用户信息失败，请重试。';
    }
  } catch (error) {
    message.value = '更新用户信息失败，请重试。';
    console.error('更新用户信息失败:', error);
  }
};
</script>

<style scoped>
.title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.profile-container {
  max-width: 500px;
  margin: auto;
  padding: 20px;
}

.info-section {
  display: flex;
  flex-direction: column;
}

.info-item {
  margin-bottom: 15px;
}

.label {
  margin-bottom: 5px;
  font-weight: bold;
}

.input-item {
  width: 100%;
}

.submit-button {
  width: 100%;
  margin-top: 10px;
}

.message {
  margin-top: 20px;
  color: red;
  text-align: center;
  font-size: 14px;
}
</style>